import { Button, Modal, message, Table } from 'antd';
import moment from 'moment';
import React, { PureComponent } from 'react';
import styles from '@/components/common/PateoTable/TableList.less';
import Ellipsis from '@/components/Ellipsis';
import enums from '../enums';

export default class OperateRecordModal extends PureComponent {
  state = {
    buttonLoading: false,
    curPage: 1,
    pageSize: 10,
    total: 0,
  };

  componentDidMount() {
    this.handleTableData();
  }

  close = () => {
    const { closeModal } = this.props;
    closeModal();
  };

  handleTableData = () => {
    const { curPage, pageSize } = this.state;
    const { merchantId } = this.props;
    this.setState({
      tableLoading: true,
    });
    this.props.dispatch({
      type: 'http/getDataWithRes',
      payload: {
        url: '/mscreditbusiness/merchant/operation/page',
        merchantId,
        curPage,
        pageSize,
      },
      callback: (response) => {
        if (response && response.statusCode == '0' && response.data) {
          if (response.data.rows.length === 0 && response.data.pagination.current > 1) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.handleTableData();
              },
            );
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            });
          }
          // } else {
          //   if (response.statusCode !== '0') {
          //     message.error(response.statusMessage);
          //   }
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };

  render() {
    const { detailData, tableData, total, curPage, pageSize, tableLoading } = this.state;
    const { changeOperateModalVisible } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'sid',
        render: (text, record, index) => {
          return pageSize * (curPage - 1) + index + 1;
        },
      },
      {
        title: '操作时间',
        dataIndex: 'createDate',
      },
      {
        title: '操作人',
        dataIndex: 'createBy',
        render: (text) => (
          <Ellipsis length={20} tooltip>
            {text}
          </Ellipsis>
        ),
      },
      {
        title: '操作类型',
        dataIndex: 'type',
        render: (text) => {
          let findText = enums.merchantOperaterType.array.find((e) => e.value == text);
          return findText ? findText.label : text;
        },
      },
      {
        title: '操作内容',
        dataIndex: 'operationContent',
        render: (text) => {
          if (text) {
            const bb = text.replace(/\\n/g, '<br>');
            console.log('bb', bb);
            return <div dangerouslySetInnerHTML={{ __html: bb }} />;
          }

          // return <pre>{text}</pre>;
        },
      },
    ];
    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>;
      },
    };
    const tableProps = {
      columns,
      pagination,
      rowKey: 'sid',
      scroll: { x: 'max-content' },
      loading: tableLoading,
      dataSource: tableData,
      size: 'small',
      onChange: (pagination) => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.handleTableData();
          },
        );
      },
    };
    return (
      <Modal
        footer={[
          <Button
            key="back"
            size="small"
            type="ghost"
            onClick={() => changeOperateModalVisible(false)}
          >
            取消
          </Button>,
          <Button
            key="ok"
            size="small"
            type="primary"
            onClick={() => changeOperateModalVisible(false)}
          >
            确定
          </Button>,
        ]}
        title="商户操作记录"
        visible={true}
        onCancel={() => changeOperateModalVisible(false)}
        width={850}
      >
        <div className={styles.tableListForm}>
          <Table {...tableProps} />
        </div>
      </Modal>
    );
  }
}
